<template>
    <Teleport to="#after-navigation" v-if="targetExists">
        <ForumManager />
    </Teleport>

    <div>
        <div class="header-title">
            <div class="header-title-left">
                <h2>{{ $t('mod.announcement.index.tit') }}</h2>
                <p>General news and announcements</p>
            </div>
            <el-button color="#d24c0e" @click="showEditWebPage('add', null)" v-if="roleStore.isSuperAdmin">{{ $t('mod.announcement.index.btn_txt1') }}</el-button>
        </div>

        <el-table :data="siteList" v-loading="loading">
            <el-table-column :label="$t('mod.announcement.index.table_label_1')">
                <template #default="{ row }">
                    <RouterLink :to="{ name: 'modAnnouncementDiscuss', params: { announcementDiscussId: row.id } }">{{ row.title }}</RouterLink>
                </template>
            </el-table-column>
            <el-table-column :label="$t('mod.announcement.index.table_label_2')" width="230">
                <template #default="{ row }">
                    {{ formatLoginTime(row.created_at) }}
                </template>
            </el-table-column>
            <el-table-column :label="$t('mod.announcement.index.table_label_3')" width="230">
                <template #default="{ row }">
                    {{ formatLoginTime(row.updated_at) }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" :label="$t('mod.announcement.index.table_label_4')" width="140">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="showEditWebPage('detail', row.id)">
                        {{ $t('mod.announcement.index.action_button_txt1') }}
                    </el-button>
                    <el-button link type="primary" size="small" @click="showEditWebPage('edit', row.id)" v-if="roleStore.isSuperAdmin">
                        {{ $t('mod.announcement.index.action_button_txt2') }}
                    </el-button>
                    <el-button link type="danger" size="small" @click="deleteAction(row.id)" v-if="roleStore.isSuperAdmin">
                        {{ $t('mod.announcement.index.action_button_txt3') }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <QuickJump url="/console/mod/announcement"></QuickJump>
    </div>
    <EditWebPage ref="EditWebPageRef" :type="2" :title="$t('mod.announcement.index.tit')" @relRefresh="getFqaList" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoleStore } from '@/stores/role'
const roleStore = useRoleStore()
import type { SiteInfo } from '@/types/siteInfo'
import SiteInfoService from '@/api/siteInfo'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatLoginTime } from '@/utils/global'
import ForumManager from '@/components/ForumManager.vue'
import EditWebPage from '@/components/EditWebPage.vue'
import QuickJump from '@/components/QuickJump.vue'
import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
const siteList = ref<SiteInfo[]>([])
const loading = ref(false)
const targetExists = ref(false)
const EditWebPageRef = ref()
function getFqaList() {
    loading.value = true
    SiteInfoService.announcement()
        .then(res => {
            siteList.value = res
        })
        .finally(() => {
            loading.value = false
        })
}

const showEditWebPage = (action: any, id: any) => {
    EditWebPageRef.value.initDialog(action, id)
}

// 删除操作
const deleteAction = (id: number) => {
    ElMessageBox.confirm(t('mod.announcement.index.delete_tips_txt'), t('header.tools.notify.tip_txt'), {
        confirmButtonText: t('golbal.btn_text_4'),
        cancelButtonText: t('golbal.btn_text_3'),
        type: 'warning',
    })
        .then(() => {
            SiteInfoService.deleteAction(id)
                .then(res => {
                    getFqaList()
                })
                .finally(() => {
                    loading.value = false
                })
        })
        .catch(() => {})
}

onMounted(() => {
    getFqaList()
    targetExists.value = !!document.querySelector('#after-navigation')
})
</script>

<style lang="less" scoped>
h2 {
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}
.header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .header-title-left {
        p {
            font-size: 15px;
            line-height: 1.67;
            color: #4c4c4c;
            margin-top: 20px;
        }
    }
}
</style>
